<template id="c-sliderGroup">
    <div>
        <div class="title-bar">{{ sliderGroupForm.title }}</div>
        <el-tabs v-model="cTitleActive">
            <el-tab-pane label="内容设置" name="first">
                <el-form ref="form" :model="sliderGroupForm" label-width="80px" label-position="right">
                    <div v-for="item,index in sliderGroupForm.content" :key="index" class="notice-item slider-item" style="margin-top: 10px">
                        <div class="slider-img">
                            <i :style="{'font-size': sliderGroupForm.iconSize + 'px', 'color': sliderGroupForm.iconColor}" :class="item.icon"></i>
                        </div>
                        <div class="slider-link">
                            <el-form-item label="字体图标">
                                <el-input v-model="item.icon" size="small"></el-input>
                            </el-form-item>
                            <el-form-item label="标题">
                                <el-input v-model="item.title" size="small"></el-input>
                            </el-form-item>
                            <el-form-item label="链接">
                                <div @click="showPage(index)">
                                    <el-input v-model="item.link" size="small" :readonly="true"></el-input>
                                </div>
                            </el-form-item>
                            <i class="el-icon-circle-close btn-del" v-if="index > 0" @click="delSlider(index)"></i>
                        </div>
                    </div>
                    <el-button style="margin-top: 10px;width: 100%" @click="addIcon">添加内容</el-button>
                </el-form>

            </el-tab-pane>
            <el-tab-pane label="样式设置" name="second">
                <el-form ref="form" :model="sliderGroupForm" label-width="90px" label-position="left">
                    <el-form-item label="排列方式">
                        <el-button-group style="float: right">
                            <el-button size="mini" :class="{'primary': sliderGroupForm.num == 3}" @click="changeStyle(3)">一行3个</el-button>
                            <el-button size="mini" :class="{'primary': sliderGroupForm.num == 4}" @click="changeStyle(4)">一行4个</el-button>
                            <el-button size="mini" :class="{'primary': sliderGroupForm.num == 5}" @click="changeStyle(5)">一行5个</el-button>
                        </el-button-group>
                    </el-form-item>
                    <el-form-item label="背景色">
                        <el-color-picker v-model="sliderGroupForm.bgColor" style="float: right" size="small"></el-color-picker>
                    </el-form-item>
                    <el-form-item label="字体大小">
                        <el-input v-model="sliderGroupForm.fontSize" type="number" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="图标大小">
                        <el-input v-model="sliderGroupForm.iconSize" type="number" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="图标颜色">
                        <el-color-picker v-model="sliderGroupForm.iconColor" style="float: right" size="small"></el-color-picker>
                    </el-form-item>
                    <el-form-item label="左右边距">
                        <el-slider
                                v-model="sliderGroupForm.borderMargin"
                                input-size="mini"
                                show-input>
                        </el-slider>
                    </el-form-item>
                    <el-form-item label="页面间距">
                        <el-slider
                                v-model="sliderGroupForm.pageMargin"
                                input-size="mini"
                                show-input>
                        </el-slider>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>

        <el-dialog title="" :visible.sync="dialogPageVisible" width="1000px">
            <pages @selected-page="handleSelect" @close-dialog="dialogPageVisible=false"></pages>
        </el-dialog>
    </div>
</template>

<script>
    Vue.component('sliderGroup', {
        template: '#c-sliderGroup',
        props: {
            comData: {
                type: Object
            },
            diyIndex: {
                type: Number
            }
        },
        data() {
            return {
                sliderGroupForm: {
                    title: '导航组',
                    type: 'sliderGroup',
                    content: [
                        {}
                    ],
                    num: 5,
                    bgColor: '#fff',
                    iconColor: '#FF4500',
                    iconSize: 35,
                    fontSize: 14,
                    borderMargin: 10, // 左右边距
                    pageMargin: 2, // 页面间距
                },
                cTitleActive: 'first',
                dialogPageVisible: false
            }
        },
        computed: {
            componentData() {
                return JSON.parse(JSON.stringify(this.sliderGroupForm));
            },
        },
        watch: {
            componentData: {
                handler(newVal, oldVal) {
                    if (!oldVal) {
                        return false;
                    }

                    this.$emit('diy', {type: 'sliderGroup', form: this.componentData, data: []})
                },
                deep: true
            },
            comData: {
                handler(newVal) {
                    this.sliderGroupForm = newVal
                },
                deep: true
            }
        },
        created() {
            if (this.comData) {
                this.sliderGroupForm = this.comData
            }
        },
        mounted() {
            this.getInitMenu()
        },
        methods: {
            // 添加图标
            addIcon() {
                this.sliderGroupForm.content.push({
                    icon: '',
                    link: '',
                    title: ''
                })
            },
            // 获取初始化菜单
            async getInitMenu() {
                let res = await request.get("/addons/diy/admin.api/getMenu", {index: this.diyIndex})
                this.sliderGroupForm.content = res.data
            },
            // 删除菜单图标
            delSlider(index) {
                this.sliderGroupForm.content.splice(index, 1)
            },
            // 改变排列方式
            changeStyle(type) {
                this.sliderGroupForm.num = type
            },
            // 选择地址
            showPage(index) {
                this.dialogPageVisible = true
                this.nowIndex = index
            },
            // 选择地址
            handleSelect(row) {
                this.dialogPageVisible = false
                this.sliderGroupForm.content[this.nowIndex].link = row.path
            }
        }
    })
</script>

<style>
    .slider-link .el-form-item {
        margin-bottom: 0;
    }
</style>